<script setup>
import { dayjs, cloneDeep, getRandomIntBetween } from "./utils";
import { ref, markRaw, onMounted } from "vue";
import ReCol from "@/components/ReCol";
import { useDark, randomGradient } from "./utils";
import GroupLine from "@iconify-icons/ri/group-line";
import Question from "@iconify-icons/ri/question-answer-line";
import CheckLine from "@iconify-icons/ri/chat-check-line";
import Smile from "@iconify-icons/ri/star-smile-line";
import { ReNormalCountTo } from "@/components/ReCountTo";
import { useRenderFlicker } from "@/components/ReFlicker";
import WelcomeTable from "./components/WelcomeTable/index.vue";
import Segmented from "@/components/ReSegmented";
import { ChartBar, ChartLine, ChartRound } from "./components/WelcomeCharts";
import { barChartData, progressData } from "./data";
import { getItemRecordList } from "@/api/item";
import { getCharge } from "@/api/charge";

defineOptions({
  name: "Welcome"
});

const { isDark } = useDark();

let curWeek = ref(1); // 0上周、1本周
const optionsBasis = [
  {
    label: "上周"
  },
  {
    label: "本周"
  }
];
onMounted(() => {
  getItemRecordListData();
  getChargeCountData();
});

const chargeCount = ref();
const getChargeCountData = async () => {
  const res = await getCharge();
  chargeCount.value = res.totalCount;
};

/** 最新动态 */
const itemRecordList = ref();

const getItemRecordListData = async () => {
  const res = await getItemRecordList();
  itemRecordList.value = res.items.map(item => {
    const newObj = cloneDeep(item);
    newObj.createTime = dayjs(item.createTime).format("YYYY-MM-DD");
    return newObj;
  });
};
</script>

<template>
  <div>
    <el-row :gutter="24" justify="space-around">
      <re-col v-motion class="mb-[18px]" :value="8" :md="12" :sm="12" :xs="24">
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium"> 负责人数量 </span>
            <div class="w-8 h-8 flex justify-center items-center rounded-md">
              <IconifyIconOffline :icon="GroupLine" width="18" />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <span>{{ chargeCount }}</span>
          </div>
        </el-card>
      </re-col>
      <re-col v-motion class="mb-[18px]" :value="8" :md="12" :sm="12" :xs="24">
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium"> 物品类别数量 </span>
            <div class="w-8 h-8 flex justify-center items-center rounded-md">
              <IconifyIconOffline :icon="Question" width="18" />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <span>{{ chargeCount }}</span>
          </div>
        </el-card>
      </re-col>
      <re-col v-motion class="mb-[18px]" :value="8" :md="12" :sm="12" :xs="24">
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium"> 仓库数量 </span>
            <div class="w-8 h-8 flex justify-center items-center rounded-md">
              <IconifyIconOffline :icon="CheckLine" width="18" />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <span>{{ chargeCount }}</span>
          </div>
        </el-card>
      </re-col>
      <re-col
        v-motion
        class="mb-[18px]"
        :value="18"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 560
          }
        }"
      >
        <el-card shadow="never" class="h-[580px]">
          <div class="flex justify-between">
            <span class="text-md font-medium">数据统计</span>
          </div>
          <WelcomeTable class="mt-3" />
        </el-card>
      </re-col>

      <re-col
        v-motion
        class="mb-[18px]"
        :value="6"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 640
          }
        }"
      >
        <el-card shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">最新动态</span>
          </div>
          <el-scrollbar max-height="504" class="mt-3">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in itemRecordList"
                :key="index"
                center
                placement="top"
                :color="item.number > 0 ? 'blue' : 'green'"
                :timestamp="item.createTime"
              >
                <p class="text-text_color_regular text-sm">
                  {{ `${item.stashName} 仓库` }}
                  <span
                    :style="{ color: item.number > 0 ? 'blue' : 'green' }"
                    >{{ item.number > 0 ? "入库" : "出库" }}</span
                  >了
                  {{ `${Math.abs(item.number)}件 ${item.name}` }}
                </p>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }
  .el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
